<template>
  <EcDialog v-model="dialogVisible" class="form-dialog" auto-height>
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <span>{{ dialogTitle }}</span>
      </div>
    </template>
    <div>
      <div class="amount-info">
        <img src="../../../assets/images/icon1.png"/>
        <div class="amount-desc">
          <div>{{formData.available_amount}}</div>
          <div>余额</div>
        </div>
      </div>
      <div class="amount-tip">同名银行卡汇款充值记账本,记账本专属账户信息(必须使用本公司同名的银行账户进行充值，首次建议小金额转入测试)</div>
      <div class="amount-li">
        <div>外卡卡号：{{ext_card_info.card_no}}</div>
        <div>外卡户名：{{ext_card_info.bank_acc_name}}</div>
        <div>外卡银行：{{ext_card_info.card_bank}}</div>
        <div>外卡支行：{{ext_card_info.card_branch}}</div>
        <div>外卡状态：{{ext_card_info.status=='A'?'正常':'-'}}</div>
        <div>外卡开户地址：{{ext_card_info.card_location}}</div>
        <div>外卡行联号：{{ext_card_info.card_deposit}}</div>
      </div>
    </div>
    <!-- 底部操作区域 -->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button :loading="dataLoading" @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button-->
<!--          :loading="dataLoading"-->
<!--          type="primary"-->
<!--          @click="onSubmitForm">-->
<!--    确定-->
<!--</el-button>-->
<!--      </span>-->
<!--    </template>-->
  </EcDialog>
</template>

<script lang="ts" setup>
import {computed, nextTick, reactive, ref} from 'vue';
import { ElLoading, ElMessage, ElNotification, FormInstance, FormRules } from 'element-plus';
import {
  getMenuList,
  SysMenuData,
  sysMenuTreeList, sysRoleAdd,
  SysRoleData,
  sysRoleInfo,
  sysRoleSaveOrUpdate, sysRoleUpdate
} from '@/api/api-sys.ts';
import useDialog from '@/hooks/use-dialog.ts';
import { EcDialog } from '@/components/dialog';
import { SvgIcon } from '@/components/icon';
import {merchantList, whiteAdd, whiteEdit, whiteInfo} from "@/api/api-store.ts";
import {UploadImage} from "@/components/upload";
import {bookList, orderBookNotify} from "@/api/api-behalf.ts";
// import { UploadImage } from '@/components/upload';
defineOptions({name: 'SysRoleForm'});

const formRef = ref<FormInstance>();
const formLoading = ref(false) // 表单是否加载中
const {dialogVisible, dialogTitle, dialogMode, dialogModeMap, dialogIconMap} = useDialog(false);

// 默认表单数据
let defaultForm: SysRoleData = {
  id: 0,
  balance:'',
};
const activeName=ref('first')
const msg=ref(0)
// 表单数据
const formData = ref({...defaultForm});
const ext_card_info=ref({})
// 表单验证规则
const formRules = reactive<FormRules>({
  balance: [{required: true, message: '金额不能为空', trigger: 'blur'}],
  // head: [{required: true, message: '支付凭证不能为空', trigger: 'blur'}],
});
const options=ref<array>([])
/** 判断数据是否处于加载中 */
const dataLoading = computed(() => {
  return formLoading.value || menuTreeLoading.value;
})

/** 是否只读 */
const readonly = computed(() => {
  // return dialogMode.value == 0;
});

/** 是否新增 */
const isCreate = ref();

const menuData = ref<SysMenuData[]>([]);
const menuTreeRef = ref();
const menuTreeProps = {
  label: 'title',
  children: 'child',
};
const menuTreeLoading = ref(false)
const reverseWithChild=(arr:any)=> {
  return arr.slice().reverse().map(item => {
    if (Array.isArray(item.child)) {
      item.child = reverseWithChild(item.child);
    }
    return item;
  });
}
/** 打开弹窗 */
const open = async (row?: any) => {
  // dialogMode.value = mode;
  dialogTitle.value = '代付余额';
  dialogVisible.value = true;
  // 重置表单
  resetForm();
  isCreate.value=row.id
  bookList({action:'query',id:row.id}).then(response => {
    formData.value=response.body
    ext_card_info.value=response.body.ext_card_info
  })
}
// 提供 open 方法，用于打开弹窗
defineExpose({open})

/** 表单提交 */
const emit = defineEmits(['success']);
const onSubmitForm = async (ids:any) => {
  await formRef.value?.validate((valid, fields) => {
    if (!valid) {
      ElMessage({type: 'error', message: '请检查是否有必填项未完善',});
      return
    }
    const loading = ElLoading.service({
      lock: true,
      text: '正在提交中...',
      background: 'rgba(0, 0, 0, 0.2)'
    })
    console.log("请求接口")

    // 提交数据
    // if(isCreate.value==undefined){
    //
    formData.value.id=isCreate.value
    orderBookNotify(formData.value, {action:'pay'}).then(response => {
      // 提示信息
      ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
      // 发送操作成功的事件
      emit('success')

      // 隐藏窗口
      // dialogVisible.value = false
    }).finally(() => loading.close())
    // }else{
    //   whiteEdit(formData.value, {action:'update'}).then(response => {
    //     // 提示信息
    //     ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
    //     // 发送操作成功的事件
    //     emit('success')
    //     // 隐藏窗口
    //     dialogVisible.value = false
    //   }).finally(() => loading.close())
    // }
  });
};

/** 重置表单 */
const resetForm = () => {
  // 重置表单数据
  formData.value = {...defaultForm};
  msg.value=0
  activeName.value='first'
};

</script>

<style lang="scss" scoped>
.form-dialog {
  .el-checkbox-group .el-checkbox {
    float: left;
    width: 150px;
    padding-right: 10px;
    margin: 0;
  }

  .permission-tree {
    width: 100%;
  }
  .tips{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #F5222D;
    padding: 16px;
  }
  .msg{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
  }
  .second_tab{
    padding: 16px;
    background: #F5F5F5;
    border-radius: 4px;
    margin-bottom: 20px;
    .second_tab_title{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      margin-bottom: 8px;
    }
    .second_tab_item{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      margin-bottom: 4px;
    }
    .second_tab_item:last-child{
      margin-bottom: 0;
    }
  }
}
.amount-info{
  display: flex;
  align-items: center;
  width: 70%;
  border: 1px solid #999;
  border-radius: 10px;
  padding:20px 10px;
  box-sizing: border-box;
  img{
    width: 120px;
  }
  .amount-desc{
    margin-left: 20px;
    div:first-child{
      font-size: 30px;
      font-weight: 500;
      color: #333;
    }
    div:last-child{
      font-size: 20px;
      margin-top: 20px;
      color: #333;
    }
  }
}
.amount-tip{
  padding: 20px 0;
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}
.amount-li{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
  color: #333;
  div{
    width: 48%;
    margin-bottom: 20px;
    font-size: 14px;
  }
}
</style>
